<template>
	<view class="container">
		<navbar :config="config">
			<template v-slot:right>
				<view class="">
					<text class="iconfont3" style="font-size: 38rpx;margin-right: 30rpx;color: #fff;"
						@click="share">&#xe624;</text>
				</view>
			</template>
		</navbar>
		<view class="code-box">
			<view class="text-bg">
				<!-- <image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/txt.png" mode="widthFix"></image> -->
			</view>
			<view class="tip">
				<!-- 注册就送168贡献值，激活就可获得积分收益! -->
			</view>
			<view class="code-bg">
				<view class="code-content">
					<view class="code-bt-bg">
						<!--二维码-->
						<view class="itemcode">
							<uqrcode ref="uqrcode" canvas-id="qrcode" :size="192" :value="url" :options="{ margin: 10 }"
								@complete="uqrcodeComplete"></uqrcode>
							<!-- <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="120" :width="150" /> -->
						</view>
						<!-- <image :src="qrcode"></image> -->
					</view>
<!-- 					<view class="code-title">消费获得贡献值,分享获得贡献值</view>
					<view class="code-title pt0">贡献值越多积分就越多，积分越多收益就越多!</view> -->

				</view>
				<canvas canvas-id="canvasId" style="width: 500px; height: 750px;" type="2d" id="canvasId">
					
				</canvas>
				<canvas canvas-id="myCanvas" style="width: 63px; height: 63px;" type="2d" id="myCanvas"></canvas>
				<view class="copy-btn-box " @click="saveQrcode">
					<button class="copy-btn">保存图片</button>
				</view>

			</view>
			<view class="bottom-bg">
				<image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/bottom.png"
					mode="widthFix"></image>
			</view>
		</view>
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
	</view>

	<!--页面加载动画-->
	<!-- <ldLoading isFullScreen :active="loading"></ldLoading> -->

	<!-- </view> -->
</template>

<script>
	// import ayQrcode from "../../components/ay-qrcode/ay-qrcode.vue"
	// import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/index'
	import share from "../../public/share";
	export default {
		components: {
			share
		},
		data() {
			return {
				orderCode:'',
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "订单核销",
					color: '#FFFFFF',
					barPlaceholder: false,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, "#118CEE"],
					statusBarFontColor: '#FFFFFF',
					rightSlot: true,
				},
				modal_qr: false,
				url: "",
				loading: true,
				accountInfo: {},
				qrcode: "",
				imgUrl: this.$mConfig.staticUrl,
				rpx: 0,
				isvisible: false,
				qrcodeUrl: ''
			};
		},
		onLoad(options) {
			this.orderCode = options.ordercode;
			//获取用户信息
			this.$http.get("/account/getAccountInfo").then((res) => {
				if (res && res.code == 200) {
					this.accountInfo = res.data;
					// this.url = "https://www.baidu.com"
					//扫描之后跳到了h5的注册页面去了
					// this.url = this.$mConfig.hostUrl + "/pages/register?id=" + this.accountInfo.id + "&" +"orderCode="+this.orderCode;
					this.url ="/pages/user/writeOff/writeOff?id=" + this.accountInfo.id + "&" +"orderCode="+this.orderCode;
					console.log(this.url, 1111)
					this.loading = false;
				}
			});
		},
		methods: {
			//复制邀请码
			copy(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: "复制成功",
						});
					},
				});
			},
			saveQrcode() {
				if (!this.qrcodeUrl) {
					uni.showToast({
						title: "暂无分享码",
						icon: "none",
					});
					return
				}
				uni.showLoading({
					title: '保存中'
				});
				let context = uni.createCanvasContext('canvasId');
				// context.setStrokeStyle("#fff")
				context.beginPath();
				
				
			
				context.drawImage("https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/bg.png" ,0, 0, 500, 750);
				// var pat = context.createPattern(
				// 	"https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/bg.png",
				// 	"no-repeat")
				// context.rect(0, 0, 750, 1500);
				// context.fillStyle = pat;
				// context.fill();
				this.getArcImg().then(res => {
					uni.getImageInfo({
						src: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/invitation3.png',
						success: (image) => {
							context.translate(100, 350);
							
							context.arc(10, 10, 10, -Math.PI, -Math.PI / 2);
							context.lineTo(280, 0);
							context.arc(280, 10, 10, -Math.PI / 2, 0);
							context.lineTo(290, 380);
							context.lineTo(0, 380);
							context.lineTo(0, 10);
							context.fillStyle = "#fff";
							context.fill();
							context.stroke()
							context.drawImage(res, 115, 20, 63, 63);
							context.font = "400 15px Arial";
							context.fillStyle = "#1a1a1a";
							context.textAlign = "center"
							context.fillText(this.accountInfo.nickname, 290 / 2, 100);
							let codeText = '邀请码:' + this.accountInfo.invitation_code;
							context.font = "400 13px Arial";
							context.fillStyle = "#FF721B";
							context.fillText(codeText, 290 / 2, 130);
							context.textAlign = "center";
							context.drawImage(image.path, (290 - 150) / 2, 160, 150, 150);
							context.drawImage(this.qrcodeUrl, (290 - 125) / 2, 170, 125, 125);
							context.fillStyle = "#1a1a1a";
							context.font = "400 12px Arial";
							context.fillText('消费获得贡献值,分享获得贡献值', 290 / 2, 340);
							context.fillText('贡献值越多积分就越多，积分越多收益就越多!', 290 / 2, 360);

							context.clip();
							
							
							
						
							
							context.draw(false, () => {
								// 返回canvas图片信息
								uni.canvasToTempFilePath({
									canvasId: 'canvasId',
									success: (res) => {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success() {
												uni.hideLoading();
												uni.showModal({
													title: "保存成功",
													content: "图片已成功保存到相册",
													showCancel: false
												})
											},
											fail(e) {
												console.log(e)
											}
										})
									},
									fail: function(err) {
										console.log(err)
										uni.hideLoading();
									}
								})
							})
						}
					})
				})
			},
			getArcImg() {
				return new Promise((resolve, ret) => {
					uni.getImageInfo({
						src: 'https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/sh-head-on.png',
						success: (image) => {
							let ctx = uni.createCanvasContext('myCanvas', this);
							ctx.save();
							
							ctx.setStrokeStyle("#fff")
							ctx.beginPath(); //开始绘制

							//先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
							ctx.arc(32, 32, 30, 0, Math.PI * 2, false);
							ctx.setLineWidth(3)
							ctx.stroke()
							ctx
								.clip(); //画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
							// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
							//path 是用uni.getImageInfo 获取的地址
							ctx.drawImage(this.accountInfo.head_photo || image.path, 0, 0, 63,
								63); // 推进去图片，必须是https图片

							ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

							ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
								uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									success: (re) => {
										// that.imgUrl = res.tempFilePath;
										resolve(re.tempFilePath)
									},
									fail: function(err) {
										console.log(err)
									}
								})
							});
						}
					})
				})
			},
			uqrcodeComplete() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						this.qrcodeUrl = res.tempFilePath;
					},
				});
			},
			share() {
				let token = uni.getStorageSync("token");
				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					this.isvisible = true;
					this.$nextTick(() => {
						this.$refs.shares.shareInfo(
							"",
							'pages/register?code=' + this.accountInfo.invitation_code,
							'',
							"",
							''
						);
					})
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
	}

	.code-box {
		width: 100%;
		min-height: 1622rpx;
		// min-height: 100vh;
		padding-top: 150rpx;
		// min-height: 490rpx;
		// background: #287fe5 url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/invitation2.png') no-repeat bottom center;
		// background-size: 750rpx 220rpx;
		background: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/bg.png') no-repeat;
		background-size: 100% 100%;

		.code-bg {
			width: 100%;
			position: relative;
			top: 520rpx;
			// background: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/invitation1.png') no-repeat top center;
			// background-size: 750rpx 490rpx;
			// padding-top: 315rpx;
			z-index: 3;

			.code-content {
				width: 80%;
				padding: 30rpx 0;
				background-color: #fff;
				margin: 0 auto;
				// border: 3px solid #3fc3d7;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.code-hide {
					width: 138rpx;
					height: 138rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-name {
					padding: 5px 0;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #1a1a1a;
				}

				.user-code-num {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #FF721B;
					padding-bottom: 42rpx;
				}

				.code-bt-bg {
					width: 438rpx;
					height: 412rpx;
					padding: 22rpx 35rpx;
					border: 1rpx solid #707070;
					// background: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/invitation3.png') no-repeat center center;
					background-size: 438rpx 412rpx;

					.itemcode {
						width: 100%;
						height: 100%;
						// background-color: red;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.code-title {
					padding-top: 26rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 500;
					color: #AAAAAA;
				}

				.pt0 {
					padding-top: 5rpx;
				}
			}



		}

		.copy-btn-box {
			width: 240rpx;
			height: 90rpx;
			margin: 45rpx auto;
			background-color: #FFFFFF;
			border-radius: 45rpx;

			.copy-btn {
				width: 100%;
				height: 100%;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #FF721B;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		#canvasId {
			// width: 580rpx;
			// height: 742rpx;
			width: 750rpx;
			height: 1500rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: fixed;
			right: -99999rpx;
		}

		#myCanvas {
			position: absolute;
			left: -99999rpx;
		}

		.text-bg {
			// position: absolute;
			// top: 190rpx;
			// left: 50%;
			width: 525rpx;
			margin: 50rpx auto 0;
			// transform: translateX(-50%);

			image {
				width: 100%;
			}
		}

		.tip {
			font-size: 22rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}

		.bottom-bg {
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 1;

			image {
				width: 100%;
				vertical-align: middle;
			}
		}


		// <view class="code-bg">
		// 	<view class="code-content">

		// 	</view>
		// </view>
	}
</style>